/**
* desc: 流程回退-公共页面
* author:wangyz
* time:2023/06/07 14:57:40
*/
<template>
  <el-dialog v-dialogDrag :title="title" modal class="pms-dialog" v-bind="$attrs" width="45%" v-on="$listeners">
    <div class="container">
      <div class="select">
        <div class="box">
          <div class="title">回退节点</div>
          <div class="content">
            <div
              v-for="(item, index) in nodeList"
              :key="index"
              class="node-item"
              :class="{ 'clicked': item.clicked }"
              @click="nodeClick(item)"
            >
              {{ item.nodeName }}
            </div>
          </div>
        </div>
        <div class="box">
          <div class="title">回退办理人</div>
          <div class="content">
            <div v-if="userSelectedName" class="user-select-item">
              <span class="el-icon-user" style="margin-right: 6px;" />
              <span>{{ userSelectedName }}&nbsp;&nbsp;{{ selectedUserId ? `(${selectedUserId})` : '' }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="message">
        <el-form ref="backPageRef" class="pms-details" :model="form" :rules="rules" label-width="100">
          <el-form-item label="办理意见" prop="opinion">
            <div style="display: flex;margin-right: 10px;">
              <el-button type="text" @click="doOpenCommonOpinion">
                （自定义常用意见）
              </el-button>
              <el-select v-model="opinion" placeholder="请选择" class="pms-select" size="mini" style="margin-left: 10px" @change="handleSelectChange">
                <el-option
                  v-for="item in opinions"
                  :key="item.id"
                  :value="item.opinion"
                />
              </el-select>
            </div>
          </el-form-item>
          <el-input v-model="form.opinion" style="margin-top: 20px;" class="pms-textarea" type="textarea" placeholder="请输入办理意见" :rows="4" />
        </el-form>
      </div>
    </div>
    <div slot="footer">
      <el-button class="pms-button-primary" @click="confirm">确 定</el-button>
      <el-button class="pms-button-primary" @click="cancel">取 消</el-button>
    </div>
    <!--常用意见列表-->
    <common-opinion v-if="ifCommonOpinion" :visible.sync="ifCommonOpinion" @close="ifCommonOpinion = false" />
  </el-dialog>
</template>

<script>
import { getBackActivities, getNextUsersByRole, getCommonOpinion } from '@/api/workFlow'
import CommonOpinion from '@/components/nextPerson/commonOpinionList'

export default {
    name: 'BackPage',
    components: {
        CommonOpinion
    },
    props: {
        title: {
            type: String,
            default: '流程回退'
        },
        // 流程实例ID
        processInstId: {
            type: [String, Number],
            required: true,
            default: ''
        },
       excludeActDefIds: {
          type: String
        },
        // 活动实例ID
        actInsetId: {
            type: [String, Number],
            required: true,
            default: ''
        },
        // 办理意见是否必填
        opinionValid: {
            type: Boolean,
            default: () => {
                return true
            }
        },
        // 流程下一步路由
        route: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            nodeList: [], // 回退节点
            userSelected: {}, // 已选择的人员节点
            toSelectdata: [], // 可选办理人树型
            actDefIdSelected: '', // 选择的节点
            form: {
                opinion: '' // 办理意见
            },
            rules: {
                opinion: [
                    { required: true, message: '请输入办理意见', trigger: 'change' }
                    // { min: 10, message: '至少输入10个字', trigger: 'blur' }
                ]
            },
            opinion: '',
            opinions: [],
            finishNode: false,
            ifCommonOpinion: false // 常用意见页面
        }
    },
    computed: {
        userSelectedName() {
            return this.userSelected.userName
        },
        selectedUserId() {
            return this.userSelected.empId
        }
    },
    watch: {
        opinionValid: {
            handler: function(newVal) {
                if (!newVal) {
                    this.rules = {}
                }
            },
            immediate: true
        }
    },
    mounted() {
        this.doSearchBackActivity()
        this.getCommonOpinions()
    },
    methods: {
        doSearchBackActivity() {
            getBackActivities({
                processInstId: this.processInstId,
                actInsetId: this.actInsetId,
                route: this.route,
                excludeActDefIds: this.excludeActDefIds
            }).then(res => {
                const { data } = res
                this.nodeList = data
                data.length && this.nodeClick(data[0])
            })
        },
        doSearchNextUsersByRole(item) {
            const param = {
                'procInstId': this.processInstId,
                'nodeId': item.nodeId,
                'userIds': this.userIds,
                'orgCode': this.orgCode,
                'orgId': this.orgId,
                'detailId': item.detailId
            }
            this.actDefIdSelected = item.actDefId
            getNextUsersByRole(param).then(res => {
                this.toSelectdata = res.data
            })
        },
        nodeClick(data) {
            // eslint-disable-next-line no-return-assign
            console.log(data, 'daya')
            this.nodeList.forEach(i => { i.clicked = false })
            data.clicked = true
            const { empId: empId, userName: userName } = data
            this.userSelected = { empId, userName }
            this.form = data
        },
        // 提交后返回值
        doEmit() {
            this.$emit('doReturn', { ...this.form })
            this.$emit('update:visible', false)
        },
        // 获取常用意见
        getCommonOpinions() {
            getCommonOpinion().then(res => {
                if (+res.code !== 200) {
                    return Promise.reject(res)
                }
                this.opinions = res.data
            })
        },
        handleSelectChange(value) {
            this.$set(this.form, 'opinion', value)
        },
        // 打开常用意见页面
        doOpenCommonOpinion() {
            this.ifCommonOpinion = true
        },
        confirm() {
            if (!Object.keys(this.userSelected).length) {
                this.$message({
                    message: '请选择回退节点',
                    type: 'error'
                })
                return
            }
            this.opinionValid && this.$refs['backPageRef'].validate((valid) => {
                // 校验通过
                valid && this.doEmit()
            })
            if (!this.opinionValid) {
                this.doEmit()
            }
        },
        cancel() {
            this.$refs['backPageRef'].resetFields()
            this.$emit('selected', {})
            this.$emit('update:visible', false)
        }
    }
}
</script>
<style lang='scss' scoped>
.container {
    .select {
        display: flex;
        align-items: center;

        // width: 750px;
        // height: 330px;
        .box {
            width: 100%;

            &:nth-child(n+2) {
                margin-left: 10px;
            }
        }

        .title {
            width: 100%;
            height: 36px;
            line-height: 36px;
            text-align: left;
            font-size: 17px;
            font-weight: 900;
            color: #eb4b4b;
        }

        .content {
            height: 250px;
            border: 1px solid #ccc;
            overflow: hidden;

            .node-item {
                height: 30px;
                line-height: 30px;
                text-align: left;
                font-size: 12px;
                width: 100%;
                background-color: #fff;
                padding-left: 10px;
                &:hover {
                    cursor: pointer;
                }

                &.clicked {
                    background-color: #ffefe5;
                    color: #eb4b4b;
                }
            }

            .user-item {
                height: 22px;
                line-height: 22px;
            }

            .user-select-item {
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 12px;
                width: 100%;
                background-color: #F4F6F8;
            }
        }

        .icon {
            margin-right: 6px;
            font-size: 14px;
        }

        ::v-deep .el-icon-caret-right:before {
            content: ''
        }
    }

    .message {
        //margin-top: 10px;
    }
}

.userTree-container {
    height: 250px;
    overflow-y: auto;
}
.el-button--text {
    color: #1b3f91;
    padding: 0;
    margin-bottom: 10px;
    line-height: 16px;
}
::v-deep .el-form-item__error {
    line-height: 0;
    top: 120px;
    left: -60px;
}
</style>
